﻿<link href="/UI/css/components/components.min.css" rel="stylesheet" />
<template>
    <ul class="v-page-navi-bar unselectble" selectble="unselectble">
        <li class="v-page-navi-info">总数/页：{{total}}/{{pages||'1'}}</li>
        <li v-show="hotpage>1" class="v-page-navi-gopre" @click="gopre">上一页</li>
        <li v-show="pages>5" class="v-page-navi-first" @click="gofirst">首页</li>
        <!--<li v-show="pagearray[0]>1" class="v-page-navi-info">···</li>-->
        <li v-show="pagearray.length>0" :class="{slcted:hotpage==pagearray[0]}" @click="slct(pagearray[0])">{{pagearray[0]}}</li>
        <li v-show="pagearray.length>1" :class="{slcted:hotpage==pagearray[1]}" @click="slct(pagearray[1])">{{pagearray[1]}}</li>
        <li v-show="pagearray.length>2" :class="{slcted:hotpage==pagearray[2]}" @click="slct(pagearray[2])">{{pagearray[2]}}</li>
        <li v-show="pagearray.length>3" :class="{slcted:hotpage==pagearray[3]}" @click="slct(pagearray[3])">{{pagearray[3]}}</li>
        <li v-show="pagearray.length>4" :class="{slcted:hotpage==pagearray[4]}" @click="slct(pagearray[4])">{{pagearray[4]}}</li>
        <!--<li v-show="pages>5&&pagearray[pagearray.length-1]<pages" class="v-page-navi-info">···</li>-->
        <li v-show="pages>5" class="v-page-navi-last" @click="golast">末页</li>
        <li v-show="hotpage<pages" class="v-page-navi-gonext" @click="gonext">下一页</li>
    </ul>
</template>
<script>
    opt={
        props: {
            num: {
                type: Number,
                default:20
            },
            total: {
                type: Number,
                default:0
            },
            hotpage: {
                type: Number,
                default:1
            }
        },
        computed: {
            pages:function(){
                return Math.ceil(this.total / this.num);
            },
            pagearray: function () {
                var p = [];
                var s = this.hotpage > 3 ? this.hotpage - 2 : 1;
                var e = Math.min(this.pages, this.hotpage > 3 ? this.hotpage + 2 : 5);
                var s = e > 4 ? e - 4 : 1;
                for (var i = s; i <= e ; i++) {
                    p.push(i);
                }
                return p;
            }
        },
        methods: {
            slct: function (p) {
                this.hotpage = p;
                this.$emit("pageslted", this.hotpage);
            }
            ,gopre: function () {
                if (this.hotpage > 1) {
                    this.hotpage -= 1;
                    this.$emit("pageslted", this.hotpage);
                }

            }
            ,gonext: function () {
                if (this.hotpage < this.pages) {
                    this.hotpage += 1;
                    this.$emit("pageslted", this.hotpage);
                }
            }
            ,gofirst: function () {
                this.hotpage = 1;
                this.$emit("pageslted", this.hotpage);
            }
            ,golast: function () {
                this.hotpage = this.pages;
                this.$emit("pageslted", this.hotpage);
            }
        }
    }
</script>